<template>
  <div class="page">
    <div class="topSearch">
      <div class="search">
        <span style="margin-left: 20px">姓名：</span>
        <el-input size="small" clearable style="width: 250px" v-model="name" placeholder="请输入姓名"></el-input>
        <span style="margin-left: 20px">订单名称：</span>
        <el-input size="small" clearable style="width: 250px" v-model="orderName"
                  placeholder="请输入订单名称"></el-input>
        <span style="margin-left: 20px">所属仓库：</span>
        <el-select clearable v-model="areaId" size='small'
                   style="width:250px" placeholder="请选择">
          <el-option v-for="item in warehouseList" :key="item.area" :label="item.areaName" :value='item.area' />
        </el-select>


        <el-button size="small" type="primary" style="width: 80px;margin-left: 20px" @click="getList">查询
        </el-button>
        <el-button size="small" style="width: 80px;margin-left: 20px" @click="reset">重置
        </el-button>
      </div>
    </div>
    <div class="centerTable" style="margin: 20px 20px 0 20px">
      <el-table :data="mobileList" border
                height="calc(100vh - 350px)"
                :cellStyle="{ textAlign: 'center', 'font-size': '12px' }"
                v-loading='loading'
                :headerCellStyle="{
'textAlign': 'center',
'fontWeight': 400,
'background': '#66b1ff',
'color': 'white',
}">
        <el-table-column prop="mobile" label="电话号码" />
        <el-table-column prop="message" label="内容" />
        <el-table-column prop="area" label="仓库">
          <template slot-scope="scope">
            <div v-if="scope.row.area===42">湖北仓</div>
            <div v-if="scope.row.area===43">宁乡壹</div>
            <div v-if="scope.row.area===44">广东仓</div>
            <div v-if="scope.row.area===45">广西仓</div>
            <div v-if="scope.row.area===52">贵州仓</div>
            <div v-if="scope.row.area===53">云南仓</div>
            <div v-if="scope.row.area===46">宁乡贰</div>
            <div v-if="scope.row.area===54">武汉仓</div>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="用户名" />
        <el-table-column prop="orderId" label="订单编号" />
        <el-table-column prop="orderName" label="订单名称" />
      </el-table>
      <el-pagination style="padding: 20px 0;" align="right" @size-change="handleSizeChange"
                     @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[10,20, 30, 40, 50]"
                     layout="total, sizes, prev, pager, next, jumper" :total="totalCount">
      </el-pagination>


    </div>

  </div>
</template>
<script>
export default {
  data() {
    return {
      mobileList: [],
      name: "",
      orderName: "",
      areaId: "",
      warehouseList: [],
      loading: false,
      currentPage: 1,
      totalCount: 0,
      pageNumber: 1,
      pageSize:10
    }
  },
  created() {
    this.$api.areaLedgerAreaList().then(res => {
      this.warehouseList = res
    })
    this.getList()
  },
  methods: {
    getList() {
      const params = {
        pageSize: this.pageSize,
        name: this.name,
        orderName: this.orderName,
        areaId: this.areaId,
        pageNumber: this.pageNumber,
      }
      this.$api.orderGetSmsSendRecordList(params).then(res => {
          this.mobileList = res.data
          this.totalCount = res.total
        }
      )
    },
    reset() {
      this.params = this.$options.data.call(this).params
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.pageNumber = val
      this.getList()
    },
  }
}


</script>
<style lang='less' scoped>
</style>
